<template>

  <van-checkbox-group v-model="selectArr" ref="checkboxGroup">
    <List ref="list" :loadapi="loadapi" :filterapi="filterapi">
      <template v-slot:searchBar="slotProps">
        <AccountSearchBar :keyword="slotProps.condition" :placeholder="slotProps.placeholder" :viewoptionArr="slotProps.viewoptionArr" @handleClickViewOption="slotProps.handleClickViewOption" @hanldeClickFilter="slotProps.hanldeClickFilter" @handleClickSearch="slotProps.handleClickSearch" @handleInputSearch="slotProps.handleInputSearch" @hanldeSelectIcon="hanldeSelectIcon"></AccountSearchBar>
      </template>
      <template v-slot:listItem="slotProps">
        <div class="L-box">
          <AccountItem idobject="account" :item="slotProps.itemData" :isOperateMode="isShowBottomRow" @handleCheck="handleCheck"></AccountItem>
        </div>
      </template>
    </List>
  </van-checkbox-group>

  <template v-if="isShowBottomRow">
    <div class="L-bottom-space"></div>
    <div class="L-bottom-row">
      <div class="L-bottom-row">

        <div class="L-operate-btn" style="width: 20%;" @click="handleCheckAll">全选</div>
        <div class="L-operate-btn" style="width: 20%;" @click="handcleShowChangeFrequency">修改频率</div>
        <div class="L-operate-btn" style="width: 20%;" @click="isShowBottomRow=false;">取消</div>

        <van-popover v-model:show="showPopover" placement="top-end" :actions="operationMoreActions" @select="handleClickOperation">
          <template #reference>
            <div class="L-operate-more-btn">
              <i class="iconfont icon-icon_more L-title"></i>
            </div>
          </template>
        </van-popover>

      </div>

    </div>
  </template>

  <van-popup v-model:show="isShowChangeFrequency" :style="{ padding: '10px',width:'70%' }" round>
    <div class="L-text-align-center L-text">修改月访问频率</div>
    <div style="margin:30px auto"><van-field v-model="frequencyNumber" type="number" placeholder="请输入每月拜访次数" /></div>
    <van-row :gutter="20">
      <van-col :span="12" class="L-text-align-center">
        <van-button type="default" style="width: 100%;" @click="isShowChangeFrequency=false">取消</van-button>
      </van-col>
      <van-col :span="12" class="L-text-align-center">
        <van-button type="primary" style="width: 100%;" @click="handleConfirm">确定</van-button>
      </van-col>
    </van-row>
  </van-popup>

  <!-- 参照弹窗 -->
  <van-popup v-model:show="showeRefPopup" position="bottom" style="width:100%;height:100%">
    <template v-if="showeRefPopup">
      <OrgRef :refParams="refParams" refObject="employee" :handleRefClick="handleRefClick" :handleRefCancle="()=>showeRefPopup=false" refMode="normal"></OrgRef>
    </template>
  </van-popup>

</template>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

import OrgRef from "@/components/base/Ref/OrgRef.vue";
import AccountSearchBar from "@/components/base/Account/AccountSearchBar.vue";
import AccountItem from "@/components/base/Account/AccountItem.vue";

import List from "@/components/common/List.vue";
import { ref, watch } from "vue";
import { showToast, showLoadingToast } from "vant";
import { apiConfigurable } from "@/request/api/api";

const loadapi = `account.list.do`;
const filterapi = `account.query.do`;

const isShowChangeFrequency = ref(false);
const frequencyNumber = ref("");

// const isShowFilter = ref(false);
const isShowBottomRow = ref(false);
watch(isShowBottomRow, (val) => {
  if (!isShowBottomRow) {
    selectArr.value = [];
  }
});
const showPopover = ref(false);
const operationMoreActions = [
  // { text: "生成路线" },
  { text: "共享" },
  { text: "转移" },
];
const selectArr = ref([]);
function hanldeSelectIcon() {
  isShowBottomRow.value = !isShowBottomRow.value;
}

function handleCheck(item, currentAction = "check") {
  if (currentAction === "check") {
    selectArr.value.push(item.account_id);
  } else {
    const index = selectArr.value.indexOf(item.account_id);
    selectArr.value.splice(index, 1);
  }
}

const checkboxGroup = ref(null);
const handleCheckAll = () => {
  checkboxGroup.value.toggleAll(true);
};

function handcleShowChangeFrequency() {
  if (selectArr.value.length === 0) {
    showToast("请选择客户");
    return;
  }
  isShowChangeFrequency.value = true;
}

const list = ref(null);

function handleConfirm() {
  if (frequencyNumber.value === "") {
    showToast("请输入访问频率");
    return;
  }
  const data = {
    account_bfpn: frequencyNumber.value,
    account_customers: selectArr.value.join(","),
  };

  showLoadingToast({
    message: "加载中...",
    forbidClick: true,
    duration: 0,
  });

  apiConfigurable("account.changefreq.do", data).then((res) => {
    if (res.code === 0) {
      showToast("修改成功!");
      frequencyNumber.value = "";
      isShowChangeFrequency.value = false;
      isShowBottomRow.value = false;
      selectArr.value = [];
      setTimeout(() => {
        list.value.initCondition();
        list.value.onLoad();
      }, 2000);
    }
    // if()
  });
}

interface refParamsIF {
  id: string;
  title: string;
  address?: string;
  fieldmap?: object;
  mapobject?: string;
}

const showeRefPopup = ref(false);

const refParams = ref({
  object: "employee",
  toobject: "account",
  field: "",
  id: "",
});

function handleClickOperation(item) {
  if (selectArr.value.length === 0) {
    showToast("请选择客户");
    return;
  }

  if (item.text === "共享") {
    refParams.value.field = "share";
  } else if (item.text === "转移") {
    refParams.value.field = "transfer";
  }

  showeRefPopup.value = true;
}

function handleRefClick(item: refParamsIF) {
  showeRefPopup.value = false;
  const { field } = refParams.value;
  const { idobject } = route.query;
  const url = `${idobject}.${field}.do`;
  const data = {
    account_idsowner: item.id,
    account_ids: selectArr.value.join(","),
  };

  showLoadingToast({
    message: "加载中...",
    forbidClick: true,
    duration: 0,
  });

  apiConfigurable(url, data).then((res) => {
    if (res.code === 0) {
      showToast("操作成功!");
      isShowBottomRow.value = false;
      selectArr.value = [];
      setTimeout(() => {
        list.value.initCondition();
        list.value.onLoad();
      }, 2000);
    }
    // if()
  });
}
</script>

<style scoped>
</style>